<template>
  <div class="bottom-bar">
    <div class="check-all">
      <check-button :is-check="isSelectAll" @click.native="selectAll"/>
      <span>全选</span>
    </div>
    <div class="total-all">合计：{{totalPrice}}</div>
    <div class="calculate" @click="calcClick">结算
      <span>({{checkLength}})</span>
    </div>
  </div>
</template>

<script>
import CheckButton from "components/content/CheckButton/CheckButton";
import { mapGetters } from "vuex";

export default {
  name: "CartBottomBar",
  components: {
    CheckButton,
  },
  computed:{
    ...mapGetters(["cartList"]),
    totalPrice(){
      return '￥' + this.cartList.filter(item => {
        return item.checked
      }).reduce((preValue,item)=>{
        return preValue + parseInt(item.price.substr(1)) * item.count
      },0)
    },
    checkLength(){
      return this.cartList.filter(item => item.checked).length
    },
    isSelectAll(){
      if(this.cartList.length === 0) return false
      return !(this.cartList.filter(item => !item.checked).length)
    }
  },
  methods:{
    selectAll(){
      if(this.isSelectAll){
        this.cartList.forEach(item => item.checked = false)
      }else{
        this.cartList.forEach(item => item.checked = true)
      }
    },
    calcClick(){
      if(this.cartList.every(item=>!item.checked)){
        this.$toast.show('请选择要购买的商品')
      }
    }
  }
};
</script>

<style scoped>
.bottom-bar {
  position: relative;
  bottom: 0px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 40px;
  font-size: 15px;
  background-color: #fff;
}
.check-all {
  display: flex;
  margin-left: 5px;
}
.check-all span {
  margin: 2px 0 0 10px;
}
.total-all{
  margin-right: 10px;
}
.calculate{
  height: 100%;
  width: 80px;
  background-color: #f00;
  display: flex;
  align-items: center;
  justify-content: center;
}
.calculate span {
  margin-left: 8px;
}
</style>